<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <!-- <link rel="stylesheet" href="./datepicker/skin/WdatePicker.css"> -->
    <style>
        body {
            width: 100%;
        }

        #box {
            width: 90%;
            margin: auto;
        }

        p {
            text-align: right;
        }

        .insert {
            margin-right: 10px;
        }

        tr {
            border: 1px solid #888;
        }

        #mask {
            width: 100%;
            height: 100%;
            background: #000;
            opacity: .5;
            position: fixed;
            top: 0;
            z-index: 0;
            display: none;
        }

        .mask {
            box-sizing: border-box;
            padding: 40px 30px;
            width: 700px;
            background: yellowgreen;
            opacity: 1;
            position: fixed;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: none;
        }
        h4 span{
            margin-left:10px;
        }
        h4 #goout{
            cursor: pointer;
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>学生管理系统</h2>
        <h4><span id="stuna"></span><span id="position"></span><span id="goout">推出登录</span></h4>
        <p><input type="submit" value="+添加学员" class="btn btn-info" id="addstu"></p>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="all">
                <!-- <tr>
                    <td>1</td>
                    <td>燕子</td>
                    <td>18</td>
                    <td>性别</td>
                    <td>所在城市</td>
                    <td class="edit"><button class="btn btn-primary insert">插入</button><button class="btn btn-danger delete">删除</button></td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
        <div class="mask">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="date" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
</body>
</html>
<!-- <script src="./datepicker/WdatePicker.js"></script> -->
<script src="./jquery.js"></script>
<script src="./all.js"></script>
<script src="san.js"></script>
<script src="./common.js"></script>
<script>
    $("#goout").click(function(){
        location.href=`${address}/login.html`;
    })

    let da = getcookie('key') || {};
    // console.log(da);
    if(!da){
        location.href = `${address}/login`;
    }

    let all = document.querySelector("#all");
    let addstu = document.querySelector("#addstu");
    let maskb = document.querySelector("#mask");
    let masks = document.querySelector(".mask");
    let cancel = document.querySelector("#cancel");

    let dataName = $("#data-name");
    let dataAge = $("#data-age");
    let datasex = $("#data-female");
    let dataJoinDate = $("#data-joinDate");
    let pro = province.value;
    let ty = city.value;
    let ea = area.value;

    //初始渲染
    $.ajax({
        url: `${address}/alllist`,
        success(data) {
            // console.log(data);
            let a = JSON.parse(data).map(item => {
                return `<tr id="tr">
                            <td id="out">${item.id}</td>
                            <td class="i-name">${item.name}</td>
                            <td class="i-age">${item.age}</td>
                            <td class="i-sex">${item.sex ? '女' : '男'}</td>
                            <td class="i-city">${item.city}</td>
                            <td id="i-time">${item.time}</td>
                            <td class="edit"><button class="btn btn-primary insert">修改</button><button class="btn btn-danger delete">删除</button></td>
                        </tr>`
            }).join('')
            all.innerHTML = a;

            
            // //修改按钮
            // $(".edit .insert").click(function(){
            //     let cc = $(this).parent().parent().find($(".i-name")).html();
            //     let dd = $(this).parent().parent().find($(".i-age")).html();
            //     let ee = $(this).parent().parent().find($(".i-sex"))[0].ckecked;
            //     let tt = $(this).parent().parent().find($(".i-time")).html();
            //     let ppr = $(this).parent().parent().find($(".i-time")).html();
            //     let tty = $(this).parent().parent().find($(".i-time")).html();
            //     let eea = $(this).parent().parent().find($(".i-time")).html();
            //     maskb.style.display = 'block';
            //     masks.style.display = 'block';

            //     dataName.val(cc);
            //     dataAge.val(dd);
            //     console.log(ee)
            //     // datasex(`${ee[0]? '女' : '男'}`)
            //     console.log(ee)
            //     console.log(tt)
            //     dataJoinDate.val(tt);


            //     // console.log(dataName.value = bb.innerHTML)



            //     history.go(0)
            // })

            //删除按钮
            $(".edit .delete").click(function () {
                var del = $(this).closest('tr').eq(0).find("#out");
                console.log(del.next("tr").html());
                if (confirm(`确定要删除${del.next().html()}同学吗？此操作不可逆`)) {
                    $.ajax({
                        url: `${address}/removeid`,
                        data: {
                            id: `${del.html()}`
                        },
                        success(data) {
                            if(data == "success"){
                                del.closest("tr").fadeOut();
                            }else{
                                alert("删除失败");
                            }
                        }
                    })
                }
            })
        }
    })

    //键盘事件
    window.onkeydown = function(event){
        if(event.keyCode === 13){
            $("#submit").click()
        }
        if(event.keyCode === 27){
            $("#cancel").click()
        }
    }

    //点击添加按钮
    addstu.onclick = function(){
        maskb.style.display = 'block';
        masks.style.display = 'block';
    }
    //取消按钮
    cancel.onclick = function(){
        
        maskb.style.display = 'none';
        masks.style.display = 'none';
    }
    //确定按钮
    $("#submit").click(function(){
        if($("#data-name").val()&&$("#data-age").val()&&$("#data-joinDate").val()){
            maskb.style.display = 'none';
            masks.style.display = 'none';
            
            $.ajax({
                url:`${address}/addstu`,
                data:{
                    name:$("#data-name").val(),
                    age:$("#data-age").val(),
                    sex:$("#data-female")[0].ckecked?0:1,
                    city:province.value+city.value+area.value,
                    time:$("#data-joinDate").val(),
                },
                success(data){
                    history.go(0)
                }
            })
        }
    })



</script>